import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Select, DatePicker, Table } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { getStoreCommentList } from '@/services/supplier/store/storeComment'

const { RangePicker } = DatePicker
const { Option } = Select
// 表头
const columns = [
  {
    title: '店铺名称',
    dataIndex: 'storeName',
    key: 'storeName',
    align: 'center'
  },
  {
    title: '客户评论',
    dataIndex: 'comment',
    key: 'comment',
    align: 'center'
  },
  {
    title: '评论星级',
    dataIndex: 'commentLevel',
    key: 'commentLevel',
    align: 'center'
  },
  {
    title: '评论时间',
    dataIndex: 'time',
    key: 'time',
    align: 'center',
  },
  {
    title: '是否显示',
    dataIndex: 'isShow',
    key: 'isShow',
    align: 'center'
  }
]

const StoreComment = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [starList, setStarList] = useState([
    {
      id: 1,
      name: '1星'
    },
    {
      id: 2,
      name: '2星'
    },
    {
      id: 3,
      name: '3星'
    },
    {
      id: 4,
      name: '4星'
    },
    {
      id: 5,
      name: '5星'
    },
  ])
  const [statusList, setStatusList] = useState([
    {
      id: 1,
      name: '未回复'
    },
    {
      id: 2,
      name: '已回复'
    }
  ])
  const [commentList, setCommentList] = useState([])
  const [pageNo, setPageNo] = useState(1)
  const [pageSize, setpageSize] = useState(10)
  const [total, setTotal] = useState(1)
  const [comment, setComment] = useState('')
  const [commentLevel, setCommentLevel] = useState('')
  const [startTimeStr, setStartTimeStr] = useState('')
  const [endTimeStr, setEndTimeStr] = useState('')
  const [status, setStatus] = useState('')

  useEffect(() => {
    init()
  }, [])
  const init = async () => {
    await getStoreCommentLists()
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      setComment(values.comment)
      setCommentLevel(values.commentLevel)
      setStatus(values.status)
      getStoreCommentLists(1, {...values})
    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return (
      <Col span={8}>
        <Form.Item label={`星级`}>
          {getFieldDecorator(`commentLevel`, {})
            (<Select
              showSearch
              filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
              placeholder="请选择"
            >
              {starList && starList.map(r => <Option key={r.id} value={r.id}>{r.name}</Option>)}
            </Select>)}
        </Form.Item>
        <Form.Item label={`评价内容`}>
          {getFieldDecorator(`comment`, {})
            (<Input placeholder="请输入评论内容" />)}
        </Form.Item>
        <Form.Item label={`评价时间`}>
          {getFieldDecorator(`time`, {})
            (<RangePicker onChange={datePicker} />)}
        </Form.Item>
        <Form.Item label={`状态`}>
          {getFieldDecorator(`status`, {})
            (<Select
              showSearch
              filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
              placeholder="请选择"
            >
              {statusList && statusList.map(r => <Option key={r.id} value={r.id}>{r.name}</Option>)}
            </Select>)}
        </Form.Item>
      </Col>
    )
  }
  // 按钮处理
  const handleBtn = type => {

  }
  // 选择评论日期
  const datePicker = (date, dateString) => {
    console.log(date, dateString)
    setStartTimeStr(dateString[0])
    setEndTimeStr(dateString[1])
  }

  const pagination = {
    total: parseInt(total),
    onChange(page) {
      getStoreCommentLists(page)
    }
  }
  // 获取门店评论列表
  const getStoreCommentLists = async (pageNo, values) => {
    let params = {
      pageNo,
      pageSize,
      commentLevel,
      comment,
      startTimeStr,
      endTimeStr,
      status
    }
    let res = await getStoreCommentList(params)
    if (res.code === '0') {
      setCommentList(res.data)
      setTotal(res.iTotalDisplayRecords)
    } else {
      alert(res.msg)
    }
  }

  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Table
        columns={columns}
        dataSource={commentList}
        rowKey={record => record.id}
        pagination={pagination}
      />
    </PageHeaderWrapper>
  )
}

export default Form.create()(StoreComment)
